<template>
  <div class="notice-container">
    <!-- 页面标题区 -->
    <div class="notice-header">
      <h1 class="notice-title">
        <i class="fas fa-bell title-icon"></i>
        消息中心
      </h1>
    </div>

    <!-- 消息统计卡片 -->
    <div v-if="isLoggedIn" class="message-stats">
      <div
        class="stat-card"
        :class="{ active: activeTab === 'system' }"
        @click="switchTab('system')"
      >
        <div class="stat-icon system">
          <i class="fas fa-bullhorn"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ systemStats.total }}</div>
          <div class="stat-label">系统公告</div>
        </div>
        <div v-if="systemStats.unread > 0" class="unread-badge">{{ systemStats.unread }}</div>
      </div>

      <div
        class="stat-card"
        :class="{ active: activeTab === 'comment' }"
        @click="switchTab('comment')"
      >
        <div class="stat-icon comment">
          <i class="fas fa-comments"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ commentStats.total }}</div>
          <div class="stat-label">评论消息</div>
        </div>
        <div v-if="commentStats.unread > 0" class="unread-badge">{{ commentStats.unread }}</div>
      </div>

      <div class="stat-card" :class="{ active: activeTab === 'like' }" @click="switchTab('like')">
        <div class="stat-icon like">
          <i class="fas fa-heart"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ likeStats.total }}</div>
          <div class="stat-label">点赞消息</div>
        </div>
        <div v-if="likeStats.unread > 0" class="unread-badge">{{ likeStats.unread }}</div>
      </div>
    </div>

    <!-- 分类标签 - 移动端备用 -->
    <el-tabs
      v-if="isLoggedIn"
      v-model="activeTab"
      class="notice-tabs mobile-only"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="系统公告" name="system" />
      <el-tab-pane label="评论" name="comment" />
      <el-tab-pane label="点赞" name="like" />
    </el-tabs>

    <!-- 公告列表区 -->
    <div class="notice-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-grid">
          <div v-for="i in 3" :key="i" class="loading-column">
            <el-skeleton :rows="3" animated />
          </div>
        </div>
      </div>

      <!-- 三列消息列表 -->
      <div class="notices-grid">
        <!-- 系统公告列 -->
        <div class="message-column system-column" :class="{ active: activeTab === 'system' }">
          <div class="column-header">
            <div class="column-title">
              <i class="fas fa-bullhorn"></i>
              <span>系统公告</span>
            </div>
            <div class="column-count">{{ messagesData.system.length }}</div>
          </div>
          <div class="column-content">
            <TransitionGroup name="notice-list" tag="div" class="notices-list">
              <div
                v-for="notice in messagesData.system"
                :key="notice.id"
                class="notice-item compact"
                :class="{
                  'is-unread': !notice.isRead,
                  'is-top': notice.isTop
                }"
                @click="showNoticeDetail(notice)"
              >
                <div class="notice-header-compact">
                  <div class="notice-title-compact">
                    {{ notice.title }}
                    <div v-if="notice.isTop" class="top-badge">
                      <i class="fas fa-thumbtack"></i>
                    </div>
                    <div v-if="!notice.isRead" class="unread-indicator"></div>
                  </div>
                  <div class="notice-time">{{ formatRelativeTime(notice.createTime) }}</div>
                </div>
                <div class="notice-preview">{{ getNoticeBrief(notice.content) }}</div>
              </div>
            </TransitionGroup>
          </div>
        </div>

        <!-- 评论消息列 -->
        <div
          v-if="isLoggedIn"
          class="message-column comment-column"
          :class="{ active: activeTab === 'comment' }"
        >
          <div class="column-header">
            <div class="column-title">
              <i class="fas fa-comments"></i>
              <span>评论消息</span>
            </div>
            <div class="column-count">{{ messagesData.comment.length }}</div>
          </div>
          <div class="column-content">
            <TransitionGroup name="notice-list" tag="div" class="notices-list">
              <div
                v-for="notice in messagesData.comment"
                :key="notice.id"
                class="notice-item compact"
                :class="{
                  'is-unread': !notice.isRead
                }"
                @click="showNoticeDetail(notice)"
              >
                <div class="notice-header-compact">
                  <div class="notice-title-compact">
                    {{ notice.title }}
                    <div v-if="!notice.isRead" class="unread-indicator"></div>
                  </div>
                  <div class="notice-time">{{ formatRelativeTime(notice.createTime) }}</div>
                </div>
                <div class="notice-preview">{{ getNoticeBrief(notice.content) }}</div>
              </div>
            </TransitionGroup>
          </div>
        </div>

        <!-- 点赞消息列 -->
        <div
          v-if="isLoggedIn"
          class="message-column like-column"
          :class="{ active: activeTab === 'like' }"
        >
          <div class="column-header">
            <div class="column-title">
              <i class="fas fa-heart"></i>
              <span>点赞消息</span>
            </div>
            <div class="column-count">{{ messagesData.like.length }}</div>
          </div>
          <div class="column-content">
            <TransitionGroup name="notice-list" tag="div" class="notices-list">
              <div
                v-for="notice in messagesData.like"
                :key="notice.id"
                class="notice-item compact"
                :class="{
                  'is-unread': !notice.isRead
                }"
                @click="showNoticeDetail(notice)"
              >
                <div class="notice-header-compact">
                  <div class="notice-title-compact">
                    {{ notice.title }}
                    <div v-if="!notice.isRead" class="unread-indicator"></div>
                  </div>
                  <div class="notice-time">{{ formatRelativeTime(notice.createTime) }}</div>
                </div>
                <div class="notice-preview">{{ getNoticeBrief(notice.content) }}</div>
              </div>
            </TransitionGroup>
          </div>
        </div>
      </div>
    </div>

    <!-- 公告详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentNotice.title"
      width="50%"
      class="notice-dialog"
    >
      <div class="notice-detail">
        <div class="notice-meta">
          <span>发布时间：{{ formatDate(currentNotice.createTime) }}</span>
          <el-tag size="small" :type="getNoticeType(currentNotice.status)">
            {{ getNoticeStatusText(currentNotice.status) }}
          </el-tag>
          <el-tag
            v-if="currentNotice.type && currentNotice.type !== 'system'"
            size="small"
            type="info"
            class="tag-item"
          >
            {{ getTypeText(currentNotice.type) }}
          </el-tag>
        </div>
        <div class="notice-content" v-html="sanitizeHtml(currentNotice.content)" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getNoticeById, pageNotice } from '@/api/notice';
import type { NoticeInfo } from '@/api/notice/types';
import { useUserStore } from '@/store/modules/user';
import { formatDate as format } from '@/utils/date';
import DOMPurify from 'dompurify';
import type { TabsPaneContext } from 'element-plus';
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue';

// 本地扩展类型：为公告添加可选的类型字段
type NoticeType = 'system' | 'comment' | 'like';
interface NoticeItem extends NoticeInfo {
  type?: NoticeType;
  isRead?: boolean; // 新增：已读状态
  likes?: number; // 新增：点赞数
}

// 用户状态管理
const UserStore = useUserStore();
const isLoggedIn = computed(() => UserStore.isLogin());

// Tab状态
const activeTab = ref<NoticeType>('system');

// 弹窗状态
const dialogVisible = ref(false);
const currentNotice = ref<NoticeItem>({
  title: '',
  content: '',
  status: 1,
  author: '',
  isRead: true
});

// 加载和错误状态
const loading = ref(false);
const error = ref<string | null>(null);
const retryCount = ref(0);

// 消息数据存储
const messagesData = ref<Record<NoticeType, NoticeItem[]>>({
  system: [],
  comment: [],
  like: []
});

// 统计数据
const messageStats = computed<Record<NoticeType, { total: number; unread: number }>>(() => {
  return {
    system: {
      total: messagesData.value.system.length,
      unread: messagesData.value.system.filter(item => !item.isRead).length
    },
    comment: {
      total: messagesData.value.comment.length,
      unread: messagesData.value.comment.filter(item => !item.isRead).length
    },
    like: {
      total: messagesData.value.like.length,
      unread: messagesData.value.like.filter(item => !item.isRead).length
    }
  };
});

// 解构统计数据，便于模板使用
const systemStats = computed(() => messageStats.value.system);
const commentStats = computed(() => messageStats.value.comment);
const likeStats = computed(() => messageStats.value.like);

// 获取公告状态文本
const getNoticeStatusText = (status: number): string => (status === 1 ? '已发布' : '草稿');

// 获取公告状态类型
const getNoticeType = (status: number): 'success' | 'warning' | 'info' | 'danger' =>
  status === 1 ? 'success' : 'warning';

// 新增：类型文本
const getTypeText = (type?: NoticeType) => {
  if (type === 'comment') return '评论';
  if (type === 'like') return '点赞';
  return '系统';
};

// 新增：空数据描述
const emptyDescription = computed(() => {
  if (activeTab.value === 'system') return '暂无系统公告';
  if (activeTab.value === 'comment') return '暂无评论消息';
  if (activeTab.value === 'like') return '暂无点赞消息';
  return '暂无消息';
});

// 新增：手动切换tab的方法
const switchTab = (tab: NoticeType) => {
  if (!isLoggedIn.value && tab !== 'system') {
    ElMessage.warning('请先登录后再查看互动消息');
    return;
  }
  activeTab.value = tab;
};

// 新增：格式化相对时间
const formatRelativeTime = (date: string | undefined): string => {
  if (!date) return '';

  const now = new Date();
  const targetDate = new Date(date);
  const diffMs = now.getTime() - targetDate.getTime();
  const diffMinutes = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (diffMinutes < 1) return '刚刚';
  if (diffMinutes < 60) return `${diffMinutes}分钟前`;
  if (diffHours < 24) return `${diffHours}小时前`;
  if (diffDays < 7) return `${diffDays}天前`;

  return format(date, 'MM-DD');
};

// 新增：标记消息为已读
const markAsRead = (notice: NoticeItem) => {
  if (!notice.isRead) {
    notice.isRead = true;
    // 这里可以调用API更新已读状态
    // await updateMessageReadStatus(notice.id);
  }
};

// 新增：错误重试机制
const retryFetch = () => {
  retryCount.value++;
  error.value = null;
  fetchNotices();
};

// 获取公告列表 - 重构优化
const fetchNotices = async () => {
  loading.value = true;
  error.value = null;

  try {
    // 系统公告数据获取
    const response = await pageNotice({
      pageNum: 1,
      pageSize: 50, // 获取足够的公告数据
      status: 1 // 只获取已发布的公告
    });

    const systemList = response.data.list || [];
    messagesData.value.system = systemList.map(item => ({
      ...item,
      type: 'system',
      isRead: Math.random() > 0.3, // 模拟部分未读状态
      likes: Math.floor(Math.random() * 50) // 模拟点赞数
    }));

    // 如果用户已登录，获取评论和点赞消息
    if (isLoggedIn.value) {
      // 模拟评论消息（实际应从API获取）
      messagesData.value.comment = [
        {
          id: Date.now() + 1,
          title: '张三评论了你的文章',
          content:
            '博主的文章写得很好，学到了很多Vue3的知识，特别是Composition API的使用技巧。请问能分享一下项目的源码吗？',
          status: 1,
          author: '张三',
          createTime: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
          type: 'comment',
          isTop: false,
          isRead: false,
          likes: 5
        },
        {
          id: Date.now() + 2,
          title: '李四回复了你的评论',
          content: '我也遇到过类似的问题，你的解决方案很有帮助！',
          status: 1,
          author: '李四',
          createTime: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
          type: 'comment',
          isTop: false,
          isRead: true,
          likes: 2
        },
        {
          id: Date.now() + 3,
          title: '小明评论了你的动态',
          content: '这个功能实现得很棒，学习了！',
          status: 1,
          author: '小明',
          createTime: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
          type: 'comment',
          isTop: false,
          isRead: false,
          likes: 1
        }
      ];

      // 模拟点赞消息（实际应从API获取）
      messagesData.value.like = [
        {
          id: Date.now() + 4,
          title: '王五赞了你的文章《Vue3实战指南》',
          content: '感谢分享，内容非常有用！',
          status: 1,
          author: '王五',
          createTime: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
          type: 'like',
          isTop: false,
          isRead: false,
          likes: 8
        },
        {
          id: Date.now() + 5,
          title: '赵六赞了你的评论',
          content: '你的观点很独特，学到了很多',
          status: 1,
          author: '赵六',
          createTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
          type: 'like',
          isTop: false,
          isRead: true,
          likes: 3
        },
        {
          id: Date.now() + 6,
          title: '小红赞了你的回复',
          content: '回答得很详细，解决了我的问题',
          status: 1,
          author: '小红',
          createTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
          type: 'like',
          isTop: false,
          isRead: false,
          likes: 2
        }
      ];
    } else {
      // 未登录用户清空互动消息
      messagesData.value.comment = [];
      messagesData.value.like = [];
    }
  } catch (err) {
    console.error('获取消息列表失败:', err);
    error.value = '获取消息列表失败，请检查网络连接';
    ElMessage.error('获取消息列表失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// Tab切换 - 移动端使用
const handleTabClick = (tab: TabsPaneContext) => {
  switchTab(tab.paneName as NoticeType);
};

// 显示公告详情 - 优化
const showNoticeDetail = async (notice: NoticeItem) => {
  try {
    // 标记为已读
    markAsRead(notice);

    // 系统公告需要获取完整内容
    if (notice.id && notice.type === 'system') {
      const response = await getNoticeById(notice.id);
      currentNotice.value = {
        ...response.data,
        type: 'system',
        isRead: true
      };
    } else {
      // 评论和点赞消息直接使用现有数据
      currentNotice.value = {
        ...notice,
        isRead: true
      };
    }

    dialogVisible.value = true;
  } catch (error) {
    console.error('获取消息详情失败:', error);
    ElMessage.error('获取消息详情失败');
  }
};

// 未登录时强制回到系统公告
watch(isLoggedIn, val => {
  if (!val && activeTab.value !== 'system') {
    activeTab.value = 'system';
  }
});

// 格式化日期
const formatDate = (date: string | undefined) => {
  if (!date) return '';
  return format(date, 'YYYY-MM-DD');
};

// 获取公告摘要
const getNoticeBrief = (content: string): string => {
  if (!content) return '';
  // 移除HTML标签并截取前100个字符
  const text = content.replace(/<[^>]*>/g, '');
  return text.length > 100 ? `${text.substring(0, 100)}...` : text;
};

// 清理HTML内容，防止XSS攻击
const sanitizeHtml = (html: string): string => {
  if (!html) return '';
  return DOMPurify.sanitize(html);
};

onMounted(() => {
  if (!isLoggedIn.value) {
    activeTab.value = 'system';
  }
  fetchNotices();
});
</script>

<style lang="scss" scoped>
.notice-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .notice-header {
    text-align: center;
    margin-bottom: 12px;
    padding: 8px 0 4px;
    flex-shrink: 0;

    .notice-title {
      font-size: 24px;
      color: #2c3e50;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .title-icon {
        font-size: 28px;
        color: #409eff;
      }
    }
  }

  // 消息统计卡片
  .message-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;

    .stat-card {
      position: relative;
      background: #fff;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 2px solid transparent;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      &.active {
        border-color: #409eff;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      }

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;

        &.system {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        &.comment {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        &.like {
          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
      }

      .stat-content {
        flex: 1;

        .stat-number {
          font-size: 28px;
          font-weight: bold;
          color: #2c3e50;
          line-height: 1;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 14px;
          color: #666;
        }
      }

      .unread-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #ff4757;
        color: #fff;
        border-radius: 10px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: bold;
        min-width: 18px;
        text-align: center;
      }
    }
  }

  .notice-tabs {
    margin-bottom: 20px;
    :deep(.el-tabs__nav-wrap) {
      justify-content: center;
    }

    :deep(.el-tabs__nav-scroll) {
      display: flex;
      justify-content: center;
    }
  }

  .notice-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

    .loading-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 16px;
      flex: 1;

      .loading-column {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        height: 100%;
      }
    }

    .notices-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 12px;
      width: 100%;
      flex: 1;
      align-items: start;

      @media (min-width: 1200px) {
        grid-template-columns: 1fr 1fr 1fr;
      }

      @media (max-width: 1199px) and (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
      }

      @media (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .message-column {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;

      &:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      &.active {
        border-color: #409eff;
        transform: scale(1.02);
      }

      &.system-column.active {
        border-color: #2196f3;
      }

      &.comment-column.active {
        border-color: #ff9800;
      }

      &.like-column.active {
        border-color: #f44336;
      }

      .column-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 12px 16px;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .column-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 600;
          font-size: 16px;
          color: #2c3e50;

          i {
            font-size: 18px;
          }
        }

        .column-count {
          background: #409eff;
          color: #fff;
          border-radius: 12px;
          padding: 4px 12px;
          font-size: 14px;
          font-weight: bold;
          min-width: 24px;
          text-align: center;
        }
      }

      .column-content {
        flex: 1;
        padding: 12px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        min-height: 0;

        .notices-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .notice-item.compact {
          background: #f8f9fa;
          border-radius: 12px;
          padding: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 1px solid transparent;
          position: relative;

          &:hover {
            background: #fff;
            border-color: #e1f5fe;
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          }

          &.is-unread {
            background: linear-gradient(to right, #e3f2fd, #f8f9fa);
            border-left: 3px solid #2196f3;

            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 3px;
              height: 100%;
              background: #2196f3;
            }
          }

          &.is-top {
            background: linear-gradient(to right, #fff3e0, #f8f9fa);
            border-left: 3px solid #ff9800;
          }

          .notice-header-compact {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            gap: 12px;

            .notice-title-compact {
              flex: 1;
              font-size: 14px;
              font-weight: 600;
              color: #2c3e50;
              line-height: 1.4;
              display: flex;
              align-items: center;
              gap: 8px;
              position: relative;

              .top-badge {
                color: #ff9800;
                font-size: 12px;
                flex-shrink: 0;
              }

              .unread-indicator {
                width: 8px;
                height: 8px;
                background: #2196f3;
                border-radius: 50%;
                flex-shrink: 0;
                animation: pulse 2s infinite;
              }
            }

            .notice-time {
              color: #909399;
              font-size: 12px;
              white-space: nowrap;
              flex-shrink: 0;
            }
          }

          .notice-preview {
            color: #666;
            font-size: 13px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    // 保持原有的完整样式用于详情弹窗
    .notice-item:not(.compact) {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-color: #e1f5fe;
      }

      &.is-unread {
        background: linear-gradient(to right, #f8fdff, #fff);
        border-left: 4px solid #409eff;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 4px;
          height: 100%;
          background: #409eff;
        }
      }

      &.is-top {
        border-color: #fef2f2;
        background: linear-gradient(to right, #fff5f5, #fff);
      }
    }

    // 列表动画
    .notice-list-enter-active,
    .notice-list-leave-active {
      transition: all 0.3s ease;
    }

    .notice-list-enter-from {
      opacity: 0;
      transform: translateY(20px);
    }

    .notice-list-leave-to {
      opacity: 0;
      transform: translateX(-20px);
    }

    .notice-list-move {
      transition: transform 0.3s ease;
    }
  }

  .loading-container {
    padding: 40px 0;

    :deep(.el-skeleton) {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
    }
  }

  .empty-container {
    padding: 60px 20px;
    text-align: center;
    width: 100%;

    :deep(.el-empty) {
      width: 100%;
      max-width: none;

      .el-empty__description {
        font-size: 16px;
        color: #909399;
      }

      .el-empty__image {
        width: 160px;
        height: 160px;
      }
    }
  }
}

// 对话框样式优化
.notice-dialog {
  :deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 20px 24px;
    margin: 0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #fff;
        font-size: 18px;

        &:hover {
          color: #f0f0f0;
        }
      }
    }
  }

  :deep(.el-dialog__body) {
    padding: 24px;
  }

  .notice-meta {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    > span {
      color: #909399;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  .notice-content {
    line-height: 1.8;
    color: #2c3e50;
    font-size: 15px;

    :deep(p) {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    :deep(img) {
      max-width: 100%;
      border-radius: 8px;
      margin: 16px 0;
    }

    :deep(code) {
      background: #f5f5f5;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .notice-container {
    padding: 12px 16px;

    .notice-header {
      margin-bottom: 16px;

      .notice-title {
        font-size: 20px;

        .title-icon {
          font-size: 24px;
        }
      }
    }

    .message-stats {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 20px;

      .stat-card {
        padding: 16px;

        .stat-icon {
          width: 40px;
          height: 40px;
          font-size: 20px;
        }

        .stat-content .stat-number {
          font-size: 24px;
        }
      }
    }

    .notice-content {
      .notices-grid {
        gap: 12px;
      }

      .message-column {
        min-height: 400px;
      }

      .notice-item.compact {
        padding: 12px;
      }
    }
  }
}

// 移动端专用标签显示
@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .message-stats {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

// 动画定义
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}
</style>
